<template>
	<view class="mask" @touchmove.stop.prevent @click="cancel">
		<view class="time_select" @click.stop="" :style="{ height: mheight + 'px' }">
			<!-- <view class="mheight" :style="{ top: mheight+55 + 'px' }"> -->
			<view class="date-head" >
				<view class="month-index" v-if="monthList.length">
					{{ scrollYear }} </view>
				<view class="weeks">
					<block v-for="data in weekList" :key="data">
						<view :class="data == '六' || data == '日' ? 'weeks-item sun' : 'weeks-item'" >{{
						data }}</view>
					</block>
					
				</view>
			</view>
			<!-- </view> -->
			<scroll-view :style="{ height: mheight-46 + 'px' }" :refresher-enabled="true" :refresher-triggered="navLoading" @refresherrefresh="scrollTop"
				:enable-passive="true" :enhanced="true" :bounces="false" :scroll-top="scrollTopNum" @scroll="scrollEvent"
				:scroll-anchoring="true" @scrolltolower="scrollDown" :scroll-y="true" class="time_select-container">
				<!-- <view class="loading" v-if="loading">加载中...</view> -->
				<view class="month-item" :id="monthdata.key" v-for="monthdata in monthList" :key="monthdata.key">
					<view class="month-index">{{
						monthdata.year
					}}年{{ monthdata.month > 9 ? monthdata.month : '0' + monthdata.month }}月</view>
					<view class="date-list">
						<view v-for="(data, index) in monthdata.months" :key="index"
							style="width:100%;justify-content: space-between; display: flex; margin: 0 0 6rpx 0; ">
							<view v-for="(item, idx) of data" :key="idx" class="date-column"
								@click="select(item, monthdata.year, monthdata.month)">
								<!-- <view class="left"></view> -->
								<view :class="'date-column-date'" style="color:#666666">
									<text class="dateStr" :style="item.today ? 'color:#0091FF' : ''">{{
										item.today ? '今天' : item.date }}</text>

									<view class="buildBox" v-if="!isSinEle && item.date && item.planObj.elevatorCount">
										<text class="date-column-planCount">
											{{ item.planObj.elevatorCount + '台' }}
										</text>
									</view>
									<view v-if="isSinEle && item.date && item.planObj.list"
										:class="item.planObj.statusFlag ? 'dateBox dateBoxbg' : 'dateBox'">
										<view>
											<image v-if="item.planObj.statusFlag" src="@/static/images/index/timeDate.png" mode=""
												style="width: 28rpx;height: 28rpx;"></image>
											<image v-else src="@/static/images/index/4.png" mode=""
												style="width: 28rpx;height: 28rpx;"></image>
										</view>

										<view class="date" :style="item.planObj.statusFlag ? 'color:#0091FF' : 'color:#666666'" >
											{{ item.planObj.list && item.planObj.list.length > 1 ? '多项' : item.elelistName }}
											<text v-if="item.planObj.list.length > 1">({{ item.planObj.list.length }})</text>
											<!-- 多项 -->
											<text 
												:class="['moreTemplate',item.planObj.statusFlag ? 'active' : 'inactive']" 
												v-if="(item.planObj.list && item.planObj.list.length === 1) && (item.planCheckName.split(',').length > 1)">
												+{{ item.planCheckName.split(',').length -1 }}
											</text>
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loading" :style="loading ? '' : 'color:#fff'">加载中...</view>
			</scroll-view>
			<view class="btns"></view>

		</view>
	</view>
</template>

<script>
export default {
	props: {
		loadMonth: {
			type: [Number,String],
			default: 3
		},
		name: String,
		defTime: {
			type: Array,
			default: ()=>[]
		},
		// 是否可以选择今天
		isChooseToday: {
			type: Boolean,
			default: false
		},
		// 
		monthArrs: {
			type: Object,
			default: ()=>{
				return {};
			}
		},
		mheight: {
			type: Number,
			default: 0
		},
		// 电梯详情页面
		isSinEle: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			scrollYear: '',
			scrollIndex: 0,
			navLoading: false,
			loading: false,
			selectTime: '',
			weekList: ['一', '二', '三', '四', '五', '六', '日'],
			Month: [],
			dateList: [],
			time: [],
			month: 0,
			year: 0,
			show: false,
			nowData: {
				year: 0,
				month: 0,
				day: 0
			},
			monthList: [],
			scrollTopNum: 0,
			scrollFlag: true,
			addCount: 1,
			planObj: {},
			arrow:'bottom',
			arrowState:1
		};
	},
	watch: {
		scrollTopNum() { 
		},

	},
	components: {
	},
	computed: {

	},
	mounted() {

		// this.initDate();

	},
	methods: {

		scrollEvent(res) {
			let scrollTopNum = res.detail.scrollTop + 100;
			for (let i = 0; i < this.monthList.length; i++) {
				scrollTopNum = scrollTopNum - this.monthList[i].height;
				if (scrollTopNum <= 0 || i == this.monthList.length - 1) {
					this.scrollIndex = i;
					this.scrollYear = this.monthList[this.scrollIndex].year + '年' + this.monthList[this.scrollIndex].month + '月';
					break;
				}
			}
			// this.scrollFlag = true
		},
		// 触顶
		scrollTop() {
			if (this.navLoading || this.monthList.length == 0) {
				return;
			}
			this.arrow = 'top';
			this.navLoading = true; 
			// this.addMonthList(this.monthList[0].year - 1, -1)
			this.$emit('loadScrollMonth', this.monthList[0], -1,'top');
		},
		// 触底
		scrollDown() { 
			if (this.loading) {
				return;
			}
			this.arrow = 'bottom';
			this.loading = true;
			this.$emit('loadScrollMonth', this.monthList[this.monthList.length - 1], 1, 'bottom');
		},

		// 加载月份分页  lag: 0(初始化)  1（上一页） -1(下一页)
		loadMonthFuc(lag) {
			// console.log('loadMonthFuc lag: 0(初始化)  1（上一页） -1(下一页)', lag)

			let num = this.loadMonth;
			if (lag == 0) {
				this.scrollTopNum = 0;
				// 初始化
				let now = new Date();
				let y = now.getFullYear();
				let m = now.getMonth() + 1;
				let list = [];
				let top = 0;

				for (let i = 1 - num; i <= 0; i++) {
					let ms = (m + i < 1 ? m + 12 + i : m + i);
					let its = {
						key: 'id' + (m + i < 1 ? y - 1 : y) + '' + (ms >= 10 ? ms : '0' + '' + ms),
						year: (m + i < 1 ? y - 1 : y),
						month: ms,
						months: this.getDate((m + i < 1 ? y - 1 : y), ms)
					};
					its.height = its.months.length * 43 + 7 + 20 + 20;
					if (i != 0) {
						top = top + its.height;
					}

					list.push(its);
				}
				let its = {
					key: 'id' + (m + 1 > 12 ? y + 1 : y) + '' + (m + 1 > 12 ? m - 12 + 1 : m + 1),
					year: (m + 1 > 12 ? y + 1 : y),
					month: (m + 1 > 12 ? m - 12 + 1 : m + 1),
					months: this.getDate((m + 1 > 12 ? y + 1 : y), (m + 1 > 12 ? m - 12 + 1 : m + 1))
				};
				its.height = its.months.length * 43 + 7 + 20 + 20;
				list.push(its);
				this.monthList = list;
				this.$nextTick(() => {
					this.scrollTopNum = top + 60; 
					this.loading = false;
					this.navLoading = false;
				});
				return;
			} else if (lag > 0) {
				// 下一页
				let y = this.monthList[this.monthList.length - 1].year;
				let m = this.monthList[this.monthList.length - 1].month;
				let list = [];
				for (let i = 1; i <= num; i++) {
					let its = {
						key: 'id' + (m + i > 12 ? y + 1 : y) + '' + (m + i > 12 ? m - 12 + i : m + i),
						year: (m + i > 12 ? y + 1 : y),
						month: (m + i > 12 ? m - 12 + i : m + i),
						months: this.getDate((m + i > 12 ? y + 1 : y), (m + i > 12 ? m - 12 + i : m + i))
					};
					its.height = its.months.length * 43 + 7 + 20 + 20;
					list.push(its);
				}
				this.monthList.push(...list);
				this.loading = false; 
				return;
			} else if (lag < 0) {
				this.scrollTopNum = 0;
				// 上一页 
				let y = this.monthList[0].year;
				let m = this.monthList[0].month;
				let top = 0;
				let list = [];
				for (let i = 0 - num; i < 0; i++) {
					let ms = (m + i < 1 ? m + 12 + i : m + i);
					let its = {
						key: 'id' + (m + i < 1 ? y - 1 : y) + '' + (ms >= 10 ? ms : '0' + '' + ms),
						year: (m + i < 1 ? y - 1 : y),
						month: ms,
						months: this.getDate((m + i < 1 ? y - 1 : y), ms)
					};
					its.height = its.months.length * 43 + 7 + 20 + 20;
					top = top + its.height;
					list.push(its);
				}
				this.monthList.unshift(...list);
				this.$nextTick(() => {
					this.scrollTopNum = top;
					// console.log('scrollTopNum', top)
					this.navLoading = false;
				});
				return;
			}
			// console.log('this.monthList', this.monthList)
			this.loading = false;
		},
		// 获取月份数组
		addMonthList(year, yearIndex) { 
			this.loadMonthFuc(yearIndex);
			
			return;
		},

		// 计算每个月的天数以及显示
		getDate(year, month) {
			let week = [];
			let Month = [];
			var nowDate = new Date(year, month, 0);

			let currentYear = nowDate.getFullYear();
			let nextYear = nowDate.getFullYear() + 1;
			let lastYear = nowDate.getFullYear() - 1;

			let nextDate = new Date(currentYear, nowDate.getMonth() + 1, 0);
			let oldDate = new Date(currentYear, nowDate.getMonth(), 0);

			if (nowDate.getMonth() == 1) {
				nextDate = new Date(currentYear, nowDate.getMonth() + 1, 0);
				oldDate = new Date(lastYear, 11, 0);
			} else if (nowDate.getMonth() == 12) {
				nextDate = new Date(nextYear, 0, 0);
				oldDate = new Date(currentYear, nowDate.getMonth(), 0);
			}

			let lastMonthDay = oldDate.getDate();

			let totalDays = nowDate.getDate();

			let monthHead = new Date(nowDate.setDate(1)).getDay() - 1 == -1 ? 6 : new Date(nowDate.setDate(1)).getDay() - 1;
			let monthTail = 7 - new Date(nowDate.setDate(totalDays)).getDay();
			// let monthDays=date.getDate()
			//
			for (let count = 1; count <= 7; count++) {
				if (monthHead > 0) {
					week.push({
						date: '',
						currentMonth: false,
						currMonth: month,
						planObj: this.planObj['' + year + month + count] || {},
						years: year,
					});
					monthHead--;
				} else {
					break;
				}
			}
			const addzero = num => {
				return num > 9 ? num : '0' + '' + num;
			};
			const today = this.nowData.year + '' + addzero(this.nowData.month);
			let elelistName = '';
			let planCheckName = ''; 
			for (let count = 1; totalDays >= count; count++) {
				let out = false;
				if (this.isChooseToday) {
					// 可选今天
					if (year + '' + addzero(month) > today) {
						out = true;
					}
					if (year + '' + addzero(month) == today && this.nowData.day < count) {
						out = true;
					}
				} else {
					// 不选今天
					if (year + '' + addzero(month) > today) {
						out = true;
					}
					if (year + '' + addzero(month) == today && this.nowData.day <= count) {
						out = true;
					}
				}

				if (this.planObj['' + year + month + count] && this.planObj['' + year + month + count].list) {
					elelistName = this.planObj['' + year + month + count].list[0].planCheckName.substring(0,2);
					planCheckName = this.planObj['' + year + month + count].list[0].planCheckName;
				}

				week.push({
					date: count,
					currentMonth: true,
					outToday: out, // 是否大于等于今天
					today: year == this.nowData.year && month == this.nowData.month && count == this.nowData.day ? true : false,
					currMonth: month,
					years: year,
					planObj: this.planObj['' + year + month + count] || {},
					elelistName: elelistName,
					planCheckName,
				});
				if (week.length == 7) {
					Month.push(week);
					week = [];
				}
			}
			if (monthTail != 7) {
				for (let count = 1; count <= 7; count++) {
					if (monthTail > 0) {
						week.push({
							date: '',
							currentMonth: false,
							currMonth: month,
							planObj: this.planObj['' + year + month + count] || {}
						});
						monthTail--;
						if (week.length == 7) {
							Month.push(week);
							week = [];
						}
					} else {
						break;
					}
				}
			}
			nowDate = null;
			oldDate = null;
			nextDate = null;
			monthHead = null;
			monthTail = null;
			// this.Month=Month
			return Month;

			// console.log(this.Month);
		},
		// 控制选择逻辑
		select(item, year, month) { 
			this.$emit('select', item, year, month);
		},

		// initPlan(){
		// 	// this.addMonthList(year, 0)

		// },
		addMonth(res) {
			if (res == 'top') {
				this.addMonthList(0, -1);
			} else {
				this.addMonthList(0, 1);
			}
		},
		// 初始化，默认为当前年月
		initDate(res,arrow) {
			this.planObj = res;
			if (arrow == 'top' || arrow == 'bottom') {
				this.addMonth(arrow);
				return;
			}

			let month = new Date().getMonth() + 1;
			let year = new Date().getFullYear();
			let day = new Date().getDate();
			this.monthList = [];
			this.month = month;
			this.year = year;
			this.nowData.month = month;
			this.nowData.year = year;
			this.nowData.day = day; 
			this.loading = true; 
			this.addMonthList(year, 0);
			// this.loadMonthDayData(1)
			if (this.defTime && this.defTime.length) {
				let arr = [];
				for (var i = 0; i < this.defTime.length; i++) {
					arr.push(new Date(this.defTime[i].replace(/-/g, '/')).getTime());
				}
				this.time = arr;
			}
		},

		cancel() {
			this.$emit('close');
			// this.$emit('cancle')
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes eject {
	0% {
		transform: translateY(1040rpx);
	}

	100% {
		transform: translateY(0);
	}
}

@mixin midPosition {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

@mixin column {
	width: 80rpx;
	height: 110rpx;
	display: flex;
	position: relative;
	padding: 0 7rpx;
}

@mixin footer {
	width: 50%;
	height: 73rpx;
	font-size: 28rpx;
	align-items: center;
	font-family: PingFangSC, PingFangSC-Regular;
	font-weight: bold;
	text-align: center;
	line-height: 40rpx;
	position: relative;
}

.mheight {
	position: sticky;
	top: 0;
	left: 0;
	background: #ffffff;
	z-index: 99;
}

.img {
	width: 36rpx;
	height: 36rpx;
}

.flex-view {
	display: flex;
	height: fit-content;
	width: fit-content;
}

.mask {
	width: 100%;
	height: 100%;
	// @include midPosition background: rgba(0, 0, 0, 0.4);
	// background: rgba(0, 0, 0, 0.17);
	background: #d8d8d8;
	// position: fixed;
	// top: 0;
	// left: 0;
	// z-index: 999;
}

.time_select {
	width: 750rpx;
	height: 100vh;
	background: #ffffff;

	&-container {
		width: 100%;
		height: calc(100% - 100rpx);
		// height: calc(100% - 240rpx);
	}
}

.titles {
	width: calc(100% - 80rpx);
	padding: 0 40rpx;
	height: 90rpx;

	&-text {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 8rpx;
	}

	&-choose {
		font-size: 28rpx;
		color: #666;

		text {
			color: #333333;
		}
	}
}

.month-index {
	color: #333333;
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}

.month-item {
	width: 100%;
	display: flex;
	padding: 20rpx 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.date-list {
		width: calc(100% - 40rpx);
		padding-top: 15rpx;
	}
}

.date-head {
	width: 100%;
	height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: #ffffff;
	z-index: 99;

	.weeks {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(162, 162, 162, 0.19);
		display: flex;
		justify-content: space-around;
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
		color: #999999;

		&-item {
			flex: 1;
			padding: 10rpx 0;
		}
	}
}

.date-column {
	flex: 1;

	@include column &-date {

		@include midPosition width: fit-content;
		height: fit-content;
		text-align: center;

	}

	&-active {
		@include column background: #def1ff;

		&-date {
			// @include midPosition
			border-radius: 50rpx;
			background: #0091ff;
			color: #ffffff;
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0;

			text {
				width: fit-content;
				height: fit-content;
				@include midPosition;
			}
		}
	}

	&-include {
		flex: 1;
		width: 80rpx;
		height: 80rpx;
		position: relative;
		padding: 0 7rpx;
		background: #def1ff;

		&-date {
			@include midPosition;
			width: fit-content;
			height: fit-content;
		}
	}

	// &-planCount{
	//     display: block; 
	//     font-size: 20rpx;
	//     padding: 2rpx 10rpx;
	//     background: #e5f4ff;
	//     border-radius: 8rpx
	// }
	&-planName {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		background: #e5f4ff;
		border-radius: 8rpx;
		color: #0091FF;

	}
}

.date-column-date {
	height: 100%;

	.dateStr {
		height: 40rpx;
		// background: pink;
	}

	.buildBox {
		background: #e5f4ff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;

		.date-column-planCount {
			color: #333;
			font-size: 24rpx;
			display: block;
			padding: 2rpx 16rpx;
		}

		.build {
			font-size: 22rpx;
			color: #666;
		}
	}

	.dateBox {
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #D8D8D8;
		// padding: 2rpx 16rpx;
		width: 84rpx;
		height: 72rpx;
		font-size: 24rpx;
		line-height: 1.2;
	}

	.dateBoxbg {
		background: #E5F4FF;
	}

}

.loading {
	text-align: center;
	color: #999;
	height: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	padding: 15rpx 0;
	transition: .1s all;

}

.sun {
	color: #fa6400;
}

.right {
	width: 50%;
	height: 100%;
	position: absolute;
	background: #def1ff;
}

.btns {
	height: 20rpx;
}

.data{
	position: relative;
}

.moreTemplate{
	color: #fff;
	padding-left:4px;
	padding-right:4px;
	position: absolute;
	right: -13px;
	top: 15px;
	font-size: 10px;
	border-radius: 20px;
	display: flex;
	align-items: center;
}

.active{
	background-color: #0091FF;
}

.inactive{
	background-color: #666;
}

</style>
